<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>首页</title>
    <!--公共css-->
    <link rel="stylesheet" href="css/base.css">
    <!--本页面css-->
    <link rel="stylesheet" href="css/index.css">
    <!--页脚-->
    <link rel="stylesheet" href="css/common.css">
    <!--mui css-->
    <link rel="stylesheet" href="lib/mui/css/mui.min.css">

</head>
<body>

<div class="layout">

    <!--客服-->
    <div class="customer">
        <a href="javascript:void(0);">
            <img src="images/index/customer.png" alt="">
            客服
        </a>
    </div>

    <!--头部-->
    <header>
        <a href="/">
            <img src="images/index/logo.png" alt="">
        </a>
        <form action="">
            <input type="text">
        </form>
    </header>

    <!--轮播图-->
    <div class="banner mui-content">
        <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
                        src="images/index/banner01.png"/></a></div>
                <div class="mui-slider-item"><a href="#"><img src="images/index/banner01.png"/></a></div>
                <div class="mui-slider-item"><a href="#"><img src="images/index/banner02.png"/></a></div>
                <div class="mui-slider-item"><a href="#"><img src="images/index/banner03.png"/></a></div>
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img
                        src="images/index/banner01.png"/></a></div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
    </div>

    <!--导航-->
    <nav class="w">
        <ul>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav01.png" alt="">
                    <p>中餐</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav02.png" alt="">
                    <p>快餐</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav03.png" alt="">
                    <p>烧烤</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav04.png" alt="">
                    <p>小吃</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav05.png" alt="">
                    <p>面食</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav06.png" alt="">
                    <p>甜品</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav07.png" alt="">
                    <p>香锅</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav08.png" alt="">
                    <p>烤鱼</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav09.png" alt="">
                    <p>炸鸡</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="images/index/nav10.png" alt="">
                    <p>更多</p>
                </a>
            </li>
        </ul>
    </nav>

    <!--加盟头条-->
    <div class="headlines w">
        <a href="javascript:void(0);">新手如何开店？如何选择一个好的项目？</a>
    </div>

    <!--热门专区-->
    <div class="hot w clearfix">
        <ul class="sel-nav" id="">
            <li class="sel-active">热门专区</li>
            <li></li>
            <li></li>
        </ul>

        <ul class="cont-nav">
            <li><a href="/exhibition.html"><img src="images/index/hot01.png" alt=""></a></li>
            <li><a href="/project.html"><img src="images/index/hot02.png" alt=""></a></li>
            <li><a href="/thousand.html"><img src="images/index/hot03.png" alt=""></a></li>
            <li><a href="/discount.html"><img src="images/index/hot04.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="images/index/hot_item_join.png" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="images/index/hot_item_add.png" alt=""></a></li>
        </ul>
    </div>

    <!--精品推荐-->
    <div class="recommend w clearfix">
        <ul class="sel-nav" id="recommend-nav">
            <li class="sel-active">精选推荐</li>
            <li>当季热搜</li>
            <li>最新入驻</li>
        </ul>

        <ul class="cont-nav" id="recommend-cont">
            <li>
                <a href="/projectinfo.html">
                    <div class="l-img">
                        <img src="images/index/recommend01.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>韩巴巴炸鸡店加盟</h2>
                        <p>网红炸鸡，万元创业</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);">
                    <div class="l-img">
                        <img src="images/index/recommend02.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>我呀便当加盟</h2>
                        <p>我呀便当，为努力工作的人加油</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);">
                    <div class="l-img">
                        <img src="images/index/recommend03.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>韩巴巴炸鸡店加盟</h2>
                        <p>网红炸鸡，万元创业</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);">
                    <div class="l-img">
                        <img src="images/index/recommend01.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>韩巴巴炸鸡店加盟</h2>
                        <p>网红炸鸡，万元创业</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="hide">
                <a href="javascript:void(0);">
                    <div class="l-img">
                        <img src="images/index/recommend01.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>韩巴巴炸鸡店加盟</h2>
                        <p>网红炸鸡，万元创业</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="hide">
                <a href="javascript:void(0);">
                    <div class="l-img">
                        <img src="images/index/recommend01.png" alt="">
                    </div>
                    <div class="r-word">
                        <h2>韩巴巴炸鸡店加盟</h2>
                        <p>网红炸鸡，万元创业</p>
                        <div>
                            <span>加盟扶持</span>
                            <span>企业认证</span>
                            <span class="f_right">5-10万起</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>

        <!--活动-->
        <div class="activity">
            <a href="javascript:void(0);">
                <img src="images/index/hd.png" alt="">
            </a>
            <a href="javascript:void(0);">查看更多》</a>
        </div>
    </div>


    <!--行业资讯-->
    <div class="news w clearfix">
        <ul class="sel-nav" id="news-nav">
            <li class="sel-active">行业资讯</li>
            <li class="f_right news-next"><a href="javascript:void(0);">MORE</a></li>
        </ul>

        <ul class="cont-nav" id="news-cont">
            <li>
               <a href="/news.html" class="clearfix">
                   <span>[炸鸡]</span>
                   <span>网红炸鸡店 小本立店轻松挣</span>
                   <span class="f_right"><em class="iconfont">&#xe620;</em><i>2241</i>人</span>
               </a>
            </li>
            <li>
               <a href="javascript:void(0);" class="clearfix">
                   <span>[粥品]</span>
                   <span>粥员外 念着你 暖着你</span>
                   <span class="f_right"><em class="iconfont">&#xe620;</em><i>2241</i>人</span>
               </a>
            </li>
            <li>
               <a href="javascript:void(0);" class="clearfix">
                   <span>[中餐]</span>
                   <span>学校边上卖饮品 几平营收翻涨快 </span>
                   <span class="f_right"><em class="iconfont">&#xe620;</em><i>2241</i>人</span>
               </a>
            </li>
            <li>
               <a href="javascript:void(0);" class="clearfix">
                   <span>[炸鸡]</span>
                   <span>网红炸鸡店 小本立店轻松挣</span>
                   <span class="f_right"><em class="iconfont">&#xe620;</em><i>2241</i>人</span>
               </a>
            </li>
            <li>
               <a href="javascript:void(0);" class="clearfix">
                   <span>[香锅]</span>
                   <span>川渝麻辣风 2-3人轻松干</span>
                   <span class="f_right"><em class="iconfont">&#xe620;</em><i>2241</i>人</span>
               </a>
            </li>
        </ul>
    </div>

    <!--友情链接-->
    <div class="friend-link w">
        <h2>友情链接：</h2>
        <div class="link-cont">
            <a href="javascript:void(0);">快马加盟网</a>
            <a href="javascript:void(0);">世纪商机网</a>
            <a href="javascript:void(0);">91加盟网</a>
            <a href="javascript:void(0);">餐饮加盟网</a>
            <a href="javascript:void(0);">中国连锁网</a>
            <a href="javascript:void(0);">中国连锁网</a>
        </div>
    </div>

    <!--页脚-->
    <footer>
        <div class="foot-logo">
            <a href="javascript:void(0);">
                <img src="images/index/foot-logo.png" alt="">
            </a>
            <div>
                <p>备案号：icp238594052</p>
                <p>官方联系方式：4000-000-000</p>
            </div>
        </div>
        <p>招商加盟网友情提示您：投资有风险，加盟需谨慎</p>
    </footer>


</div>

<!--rem-->
<script src="js/rem.js"></script>
<!--mui-->
<script src="lib/mui/js/mui.min.js"></script>
<!--jq-->
<script src="lib/jq/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        //获得slider插件对象
        var gallery = mui('.mui-slider');
        gallery.slider({
            interval: 3000//自动轮播周期，若为0则不自动播放，默认为0；
        });

        // tab切换
        // $(".sel-nav").on("")
        $("#recommend-nav").on('touchstart', "li", function (e) {
            console.log($(this).index())
            $(this).addClass("sel-active").siblings().removeClass("sel-active")
            $("#recommend-cont li").eq($(this).index()).fadeIn(100).siblings().fadeOut()
            // console.log($(".recommend-cont li").eq($(this).index()).html())
        });


        // 状态栏变色
        function topColor() {
            $(window).scroll(() => {
                    var topBar = $("header")
                    console.log(topBar)
                }
            )
        }

        // topColor()
    })
</script>
</body>
</html>
